﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js修改绑定手机号码流程步骤表单代码</title>

    <link rel="stylesheet" type="text/css" href="css/link.css">
    <link rel="stylesheet" type="text/css" href="css/layui.css">

    <script src="js/jquery-2.1.1.min.js"></script>
    <!--导入vue 包-->
    <script src="vue/Vue.v2.6.12.js"></script>
    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
   <!-- <script type="text/javascript" src="js/admin.check.login.js"></script>-->
</head>
<body>
<script src="/demos/googlegg.js"></script>

<div class="rebinding-box" id="updatePassword">
    <div class="box-title">
        <h2 class="mtb5">修改密码</h2>
        <i>为了保障您的帐户安全，请先进行安全验证</i>
    </div>
    <div class="box-timeline">
        <ul class="text-center" style="width: 800px;">
            <li>
                填写登录密码
                <div class="box-num1">
                    1
                </div>
            </li>
            <li class="ml45">
                修改新密码
                <div class="box-outside1 outside1ab" id="outside1abs">
                    <div class="box-num2 num2ab">
                        2
                    </div>
                </div>
            </li>
            <li class="ml45">
                完成
                <div class="box-outside2 outside2a" id="outside2as">
                    <div class="box-num3 num3a">
                        3
                    </div>
                </div>
            </li>
            <div class="clear">

            </div>
        </ul>
    </div>
    <!--第一步-->
    <div class="onebox-form" id="oneform">
        <div class="oneform">
            <div class="oneform-box">
                <label class="oneform-label">登录密码</label>
                <div class="oneform-input">
                    <input type="password" id="password" autocomplete="off" placeholder="请填写登录密码，认证帐号">
                </div>
            </div>
            <div class="onebtn-box">
                <button class="onebtn" onclick="formSubmit()">下一步</button>
            </div>
        </div>
    </div>
    <!--第二步-->
    <div class="twobox-form" id="twoform">
        <form class="twoform">
            <div class="twoform-box">
                <div class="newtel">
                    <label class="twoform-label">新密码</label>
                    <div class="twoform-input">
                        <input type="text" id="password2" autocomplete="off" placeholder="请输入新密码">
                    </div>
                </div>
                <div class="newtel">
                    <label class="twoform-label">再次输入</label>
                    <div class="twoform-input">
                        <input type="text" id="password3" autocomplete="off" placeholder="请再次输入新密码">
                    </div>
                </div>
                <!--<div class="validatecode">
                    <label class="twoform-label2">验证码</label>
                    <div class="twoform-input2">
                        <input type="text" autocomplete="off" placeholder="请输入验证码">

                    </div>
                    <button class="sendcode" disabled="disabled">发送验证码</button>

                </div>-->
            </div>
        </form>
        <div class="twobtn-box">
            <button class="twobtn" id="twobtn" onclick="formSubmit2()">下一步</button>
        </div>
    </div>
    <!--第三步-->
    <div class="threebox-form" id="threeform">
        <div class="successr">
            <div class="symbol">

            </div>
            <p>恭喜您，密码修改成功！</p>
            <button class="confirm" href="login.html"><a href="login.html" style="color: white">确认</a></button>
<!--            <button class="confirm" href="login.html">确认</button>-->
        </div>
    </div>
</div>

<script src="js/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    var soutside1ab = document.getElementById("outside1abs");
    var soutside2as = document.getElementById("outside2as");
    var oneforms = document.getElementById("oneform");
    var twoforms = document.getElementById("twoform");
    var threeforms = document.getElementById("threeform");

    function formSubmit() {
        var cookie = getCookie("userMassage");
        console.log(cookie)
        var parse = JSON.parse(cookie);
        let userNameValue = parse.userName;
        let passwordValue = $("#password").val();

        //发起http 请求
        let url = "/login.do";
        let params = {userName: userNameValue, password: passwordValue};
        postWithJson(url, params, function (data) {
            soutside1ab.classList.remove("outside1ab");
            oneforms.style.display = "none";
            twoforms.style.display = "block";
        })
    }

    function formSubmit2() {
        var cookie = getCookie("userMassage");
        console.log(cookie)
        var parse = JSON.parse(cookie);
        var userId = parse.userID;
        var passwordValue = $("#password2").val();
        var password2Value = $("#password3").val();
        if (passwordValue != password2Value) {
            alert("密码错误");
            return;
        }
        //发起http请求
        let url = "/updatePassword.do";
        let params = {userID:userId,password:passwordValue};
        postWithJson(url,params,function () {
            threeforms.style.display = "block";
            twoforms.style.display = "none";
            soutside2as.classList.remove("outside2a");
        })
        /*//发起http 请求
   let url = "/login.do";
   let params = {userName: userNameValue, password: passwordValue};
   postWithJson(url, params, function (data) {
       soutside1ab.classList.remove("outside1ab");
       oneforms.style.display = "none";
       twoforms.style.display = "block";
   })*/


    }

    /*var onebtns = document.getElementById("onebtn");
    var twobtns = document.getElementById("twobtn");
    var soutside1ab = document.getElementById("outside1abs");
    var soutside2as = document.getElementById("outside2as");
    var oneforms = document.getElementById("oneform");
    var twoforms = document.getElementById("twoform");
    var threeforms = document.getElementById("threeform");

    function fun() {
        var pasvals = document.getElementById("pasval").value;
        isPasswd(pasvals);

        function isPasswd(s) {
            var patrn = /^(\w){6,20}$/;
            if (!patrn.exec(s)) {
                alert("只能输入6-20个字母、数字、下划线")
                return false
            } else {
                //1、先类似登录的密码验证是否相同

                soutside1ab.classList.remove("outside1ab");
                oneforms.style.display = "none";
                twoforms.style.display = "block";
            }
        }
    }

    function fun1() {
        var str = document.getElementById("ntel").value;
        isPoneAvailable(str);

        function isPoneAvailable(str) {
            var myreg = /^[1][0-9]{10}$/;
            if (!myreg.test(str)) {
                alert("请输入正确的手机号")
                return false;
            } else {
            	//2、发起修改请求，获取当前cookie的id与现在输入的密码
				//3、发起修改密码请求
                threeforms.style.display = "block";
                twoforms.style.display = "none";
                soutside2as.classList.remove("outside2a");
            }
        }


    }*/
</script>

</body>
</html>